<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 鼠标坐标相关
        //    pageX / pageY   鼠标与实际页面的坐标
        //    clientX / clientY / x / y   鼠标和浏览器窗口的坐标
        //    offsetX / offsetY   鼠标与目标源的坐标


        // 盒子的宽高问题
        //    width / height   盒子的css的宽高
        //    clientWidth / clientHeight   盒子内容+内边距的宽高
        //    offsetWidth / offsetHeight   盒子内容+内边距+边框的宽高

        // 盒子的位置
        //   offsetLeft / offsetTop   盒子距离参照物的位置


        // 页面的宽高问题
        //     页面的实际宽高  document.documentElement.scrollWidth / scrollHeight
        //     浏览器的可视宽高  document.documentElement.clientWidth / clientHeight
        

        // 盒子的滚动位置
        //     document.documentElement.scrollLeft / scrollTop
        //     盒子本身也会有滚动  --- 一般用的少一点


    </script>
    
</body>
</html>